<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智培星云——分布式水培生态中枢</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-seedling"></i> 智培星云——分布式水培生态中枢</h1>
            <p>实时监控水培环境参数，确保最佳生长条件</p>
        </header>
        
        <div class="status-bar">
            <div class="status-item">
                <div class="status-indicator status-disconnected" id="mqttStatusIndicator"></div>
                <span id="mqttStatusText">MQTT未连接</span>
            </div>
            <div class="status-item">
                <i class="fas fa-clock"></i> 最后数据: <span id="lastDataTime">--</span>
            </div>
            <div class="status-item">
                <i class="fas fa-exclamation-triangle"></i> 警报: <span id="alertCount">0</span> 个
            </div>
        </div>
        
        <div class="sensor-grid" id="sensorGrid">
            <div class="no-data" id="noDataMessage">
                <i class="fas fa-tint fa-3x" style="margin-bottom: 15px; opacity: 0.5;"></i>
                <p>等待传感器数据...</p>
            </div>
        </div>
        
        <div class="charts-container">
            <div class="chart-card">
                <div class="chart-title">水质参数趋势</div>
                <div class="chart-wrapper">
                    <canvas id="waterQualityChart"></canvas>
                </div>
            </div>
            <div class="chart-card">
                <div class="chart-title">环境参数趋势</div>
                <div class="chart-wrapper">
                    <canvas id="environmentChart"></canvas>
                </div>
            </div>
        </div>
        
        <!-- 图像显示面板 -->
        <div class="image-panel">
            <div class="chart-title">
                <i class="fas fa-camera"></i> 实时图像监控
                <span class="image-status" id="imageStatus">等待图像数据...</span>
            </div>
            
            <!-- 模式控制区域 -->
            <div class="mode-controls">
                <div class="mode-selector">
                    <label>传输模式:</label>
                    <div class="mode-buttons">
                        <button id="streamModeBtn" class="btn btn-sm active" onclick="switchMode('stream')">
                            <i class="fas fa-video"></i> 持续推流
                        </button>
                        <button id="onDemandModeBtn" class="btn btn-sm" onclick="switchMode('on_demand')">
                            <i class="fas fa-camera"></i> 按需拍照
                        </button>
                    </div>
                </div>
                
                <div class="stream-controls" id="streamControls">
                    <button id="pauseStreamBtn" class="btn btn-warning btn-sm" onclick="controlStream('pause')">
                        <i class="fas fa-pause"></i> 暂停推流
                    </button>
                    <button id="resumeStreamBtn" class="btn btn-success btn-sm" style="display: none;" onclick="controlStream('resume')">
                        <i class="fas fa-play"></i> 恢复推流
                    </button>
                </div>
                
                <div class="capture-controls" id="captureControls" style="display: none;">
                    <button class="btn btn-primary btn-sm" onclick="requestCapture()">
                        <i class="fas fa-camera"></i> 请求拍照
                    </button>
                    <span class="mode-status" id="captureStatus">设备休眠中</span>
                </div>
            </div>
            
            <div class="image-container">
                <img id="cameraImage" src="" alt="实时图像" style="display: none;">
                <div class="no-image" id="noImageMessage">
                    <i class="fas fa-camera fa-3x" style="margin-bottom: 15px; opacity: 0.3;"></i>
                    <p>等待图像数据...</p>
                </div>
            </div>
            
            <div class="image-controls">
                <button class="btn btn-sm" onclick="requestImage()">
                    <i class="fas fa-sync"></i> 刷新图像
                </button>
                <button class="btn btn-primary btn-sm" onclick="takeSnapshot()">
                    <i class="fas fa-download"></i> 保存截图
                </button>
                <span class="image-time" id="imageTime">--</span>
            </div>
        </div>
        
        <div class="alerts-panel" id="alertsPanel" style="display: none;">
            <div class="chart-title"><i class="fas fa-exclamation-circle"></i> 系统警报</div>
            <div id="alertsList"></div>
        </div>
        
        <div class="threshold-panel">
            <div class="chart-title"><i class="fas fa-sliders-h"></i> 阈值设置</div>
            <div class="threshold-controls">
                <div class="threshold-section">
                    <h4>水质参数阈值</h4>
                    <div class="threshold-grid" id="waterThresholds">
                        <div class="threshold-item">
                            <label>二氧化碳浓度 (ppm)</label>
                            <div class="threshold-inputs">
                                <input type="number" id="co2-min" placeholder="下限">
                                <span>~</span>
                                <input type="number" id="co2-max" placeholder="上限">
                            </div>
                        </div>
                        <div class="threshold-item">
                            <label>pH值</label>
                            <div class="threshold-inputs">
                                <input type="number" id="ph-min" placeholder="下限">
                                <span>~</span>
                                <input type="number" id="ph-max" placeholder="上限">
                            </div>
                        </div>
                        <div class="threshold-item">
                            <label>TDS值 (ppm)</label>
                            <div class="threshold-inputs">
                                <input type="number" id="tds-min" placeholder="下限">
                                <span>~</span>
                                <input type="number" id="tds-max" placeholder="上限">
                            </div>
                        </div>
                        <div class="threshold-item">
                            <label>溶解氧浓度 (mg/L)</label>
                            <div class="threshold-inputs">
                                <input type="number" id="dissolved_oxygen-min" placeholder="下限">
                                <span>~</span>
                                <input type="number" id="dissolved_oxygen-max" placeholder="上限">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="threshold-section">
                    <h4>环境参数阈值</h4>
                    <div class="threshold-grid" id="environmentThresholds">
                        <div class="threshold-item">
                            <label>温度 (°C)</label>
                            <div class="threshold-inputs">
                                <input type="number" id="temperature-min" placeholder="下限">
                                <span>~</span>
                                <input type="number" id="temperature-max" placeholder="上限">
                            </div>
                        </div>
                        <div class="threshold-item">
                            <label>湿度 (%)</label>
                            <div class="threshold-inputs">
                                <input type="number" id="humidity-min" placeholder="下限">
                                <span>~</span>
                                <input type="number" id="humidity-max" placeholder="上限">
                            </div>
                        </div>
                        <div class="threshold-item">
                            <label>光照强度 (lx)</label>
                            <div class="threshold-inputs">
                                <input type="number" id="light_intensity-min" placeholder="下限">
                                <span>~</span>
                                <input type="number" id="light_intensity-max" placeholder="上限">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button class="btn btn-primary" onclick="saveThresholds()"><i class="fas fa-save"></i> 保存阈值设置</button>
            <button class="btn" onclick="loadThresholds()"><i class="fas fa-sync"></i> 加载当前阈值</button>
        </div>
        
        <div class="control-panel">
            <div class="chart-title"><i class="fas fa-cogs"></i> 设备控制</div>
            <div class="device-controls">
                <div class="device-grid" id="deviceGrid">
                    <div class="device-item">
                        <label>补光灯</label>
                        <div class="device-switch">
                            <button class="btn btn-sm device-off" onclick="toggleDevice('grow_light', 0)">关</button>
                            <button class="btn btn-sm device-on" onclick="toggleDevice('grow_light', 1)">开</button>
                        </div>
                    </div>
                    <div class="device-item">
                        <label>碱性水泵</label>
                        <div class="device-switch">
                            <button class="btn btn-sm device-off" onclick="toggleDevice('alkaline_pump', 0)">关</button>
                            <button class="btn btn-sm device-on" onclick="toggleDevice('alkaline_pump', 1)">开</button>
                        </div>
                    </div>
                    <div class="device-item">
                        <label>营养液泵</label>
                        <div class="device-switch">
                            <button class="btn btn-sm device-off" onclick="toggleDevice('nutrient_pump', 0)">关</button>
                            <button class="btn btn-sm device-on" onclick="toggleDevice('nutrient_pump', 1)">开</button>
                        </div>
                    </div>
                    <div class="device-item">
                        <label>风扇</label>
                        <div class="device-slider">
                            <div class="slider-container">
                                <input type="range" id="fan_slider" min="0" max="100" value="0" onchange="setDeviceValue('fan', this.value)">
                            </div>
                            <span class="value-display" id="fan_value">0%</span>
                        </div>
                    </div>
                    <div class="device-item">
                        <label>加热器</label>
                        <div class="device-switch">
                            <button class="btn btn-sm device-off" onclick="toggleDevice('heater', 0)">关</button>
                            <button class="btn btn-sm device-on" onclick="toggleDevice('heater', 1)">开</button>
                        </div>
                    </div>
                    <div class="device-item">
                        <label>酸性水泵</label>
                        <div class="device-switch">
                            <button class="btn btn-sm device-off" onclick="toggleDevice('acid_pump', 0)">关</button>
                            <button class="btn btn-sm device-on" onclick="toggleDevice('acid_pump', 1)">开</button>
                        </div>
                    </div>
                    <div class="device-item">
                        <label>加湿器</label>
                        <div class="device-switch">
                            <button class="btn btn-sm device-off" onclick="toggleDevice('humidifier', 0)">关</button>
                            <button class="btn btn-sm device-on" onclick="toggleDevice('humidifier', 1)">开</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="control-presets">
                <button class="btn" onclick="setPreset('all_off')"><i class="fas fa-power-off"></i> 全部关闭</button>
            </div>
        </div>
        
        <div class="last-update">
            系统最后更新: <span id="lastUpdateTime">--</span>
        </div>
        
        <!-- 模型下发面板 -->
    <div class="model-update-panel">
        <div class="chart-title"><i class="fas fa-brain"></i> 神经网络模型更新</div>
        
        <div class="model-controls">
            <div class="model-upload-area" id="modelUploadArea">
                <i class="fas fa-cloud-upload-alt fa-2x"></i>
                <p>点击选择或拖放 .kmodel 文件</p>
                <input type="file" id="modelFileInput" accept=".kmodel" style="display: none;">
                <button class="btn btn-primary" onclick="document.getElementById('modelFileInput').click()">
                    <i class="fas fa-folder-open"></i> 选择文件
                </button>
            </div>
            
            <div class="model-info" id="modelInfo" style="display: none;">
                <div class="model-details">
                    <h4>文件信息</h4>
                    <p><strong>文件名:</strong> <span id="modelFileName">--</span></p>
                    <p><strong>文件大小:</strong> <span id="modelFileSize">--</span></p>
                    <p><strong>最后修改:</strong> <span id="modelFileDate">--</span></p>
                </div>
                
                <div class="model-actions">
                    <button class="btn btn-success" id="uploadModelBtn" onclick="uploadModel()">
                        <i class="fas fa-upload"></i> 上传模型
                    </button>
                    <button class="btn btn-warning" id="pauseUploadBtn" onclick="pauseUpload()" style="display: none;">
                        <i class="fas fa-pause"></i> 暂停
                    </button>
                    <button class="btn btn-info" id="resumeUploadBtn" onclick="resumeUpload()" style="display: none;">
                        <i class="fas fa-play"></i> 继续
                    </button>
                    <button class="btn btn-danger" id="cancelUploadBtn" onclick="cancelUpload()" style="display: none;">
                        <i class="fas fa-times"></i> 取消
                    </button>
                    <button class="btn" onclick="clearModelSelection()">
                        <i class="fas fa-times"></i> 取消选择
                    </button>
                </div>
            </div>
            
            <div class="upload-progress" id="uploadProgress" style="display: none;">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <span id="progressText">0%</span>
            </div>
            
            <div class="upload-status" id="uploadStatus"></div>
        </div>
    </div>
    </div>

    <!-- 引入第三方库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
    
    <!-- 引入自定义JS -->
    <script src="script.js"></script>
</body>
</html>